
<template>
  <div>
    <mt-tabbar fixed v-model="selected" class="n-tabbar" :style="{height: initBarHeight}">
      <mt-tab-item id="course" href="#/workIndex" data="工作室" @click.native="changeTitle">
        <div :style="{marginTop: initIconMarginTop,marginBottom: initIconMarginBootom}">
          <span :class="(selected == 'course') ? courseIcon : courseIconUn" :style="{fontSize: initIconFontSize}"></span>
        </div>
        <div>
          <span :style="{fontSize: initFontSize,color: (selected == 'course') ? '#00b685' : '#5b6175'}">工作室</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="student" href="#/student"  data="经典" @click.native="changeTitle">
        <div :style="{marginTop: initIconMarginTop,marginBottom: initIconMarginBootom}">
          <span :class="(selected == 'student') ? studentIcon : studentIconUn" :style="{fontSize: initIconFontSize}"></span>
        </div>
        <div>
          <span :style="{fontSize: initFontSize,color: (selected == 'student') ? '#00b685' : '#5b6175'}">经典</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="lecturer" href="#/lecturer" data="发现"  @click.native="changeTitle">
        <div :style="{marginTop: initIconMarginTop,marginBottom: initIconMarginBootom}">
          <span :class="(selected == 'lecturer') ? lecturerIcon : lecturerIconUn" :style="{fontSize: initIconFontSize}"></span>
        </div>
        <div>
          <span :style="{fontSize: initFontSize,color: (selected == 'lecturer') ? '#00b685' : '#5b6175'}">发现</span>
        </div>
      </mt-tab-item>
      <mt-tab-item id="lecturer" href="#/lecturer" data="我得"  @click.native="changeTitle">
        <div :style="{marginTop: initIconMarginTop,marginBottom: initIconMarginBootom}">
          <span :class="(selected == 'lecturer') ? lecturerIcon : lecturerIconUn" :style="{fontSize: initIconFontSize}"></span>
        </div>
        <div>
          <span :style="{fontSize: initFontSize,color: (selected == 'lecturer') ? '#00b685' : '#5b6175'}">我得</span>
        </div>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        selected: 'course',
        courseIcon: 'icon-course_selected',
        lecturerIcon: 'icon-lecturer_selected',
        studentIcon: 'icon-student_selected',
        courseIconUn: 'icon-course_un_selected',
        lecturerIconUn: 'icon-lecturer_un_selected',
        studentIconUn: 'icon-student_un_selected'
      }
    },
    computed: {
      initFontSize () {
        return this.clientWidth * 20 / 750 + 'px'
      },
      initIconFontSize () {
        return this.clientWidth * 44 / 750 + 'px'
      },
      initBarHeight () {
        return this.clientWidth * 120 / 750 + 'px'
      },
      initIconMarginTop () {
        return this.clientWidth * 11.5 / 750 + 'px'
      },
      initIconMarginBootom () {
        return this.clientWidth * 11 / 750 + 'px'
      }
    },
    mounted () {
      this.reflush()
    },
    methods: {
      changeTitle (e) {
        document.title = e.currentTarget.attributes['data'].value
      },
      reflush () {
        if (window.location.hash === '#/course') {
          this.selected = 'course'
        } else if (window.location.hash === '#/student') {
          this.selected = 'student'
        } else if (window.location.hash === '#/lecturer') {
          this.selected = 'lecturer'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .n-tabbar {
    z-index: 10;
  }
</style>
